<!-- 已开处方 -->
<template>
  <div>
    <el-row class="mt10" type="flex">
      <Search :data="selections" :attribute="'createdTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
      <el-form ref="searchFormRef" :model="searchForm" label-width="100px" :inline="true" class="spn">
        <el-form-item label="处方单状态：">
          <dictionary-selector code="swan_department_cfdzt" :value.sync="searchForm.medicationStatus" @change="searchBtn" />
        </el-form-item>
        <span>
          <el-form-item>
            <el-input v-model="searchForm.customerName" class="inputCss" placeholder="姓名、手机号、会员号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索顾客</el-button>
          </el-form-item>
        </span>
      </el-form>
    </el-row>
    <!-- 表单区域 -->
    <el-table v-loading="loading" :data="prescriptionList">
      <el-table-column label="处方单号" prop="prescriptionNumber" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="订单号" prop="orderNumber" align="center" />
      <el-table-column label="顾客" prop="customerName" align="center" />
      <el-table-column label="开单人" prop="createdBy" align="center" />
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="medicationStatus" align="center" />
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="detailsBtn(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    <!-- 处方单详情 -->
    <Dialog :title="title" :visible.sync="visible" :reveal="false" :loading="loading" @close="handleClose">
      <p class="ps"><strong>顾客</strong></p>
      <div class="headStyle">
        <span>名称：{{ prescriptionData.customerName }}</span><span>性别：{{ prescriptionData.sex }}</span><span>年龄：{{ prescriptionData.age }}</span><span>项目：{{ prescriptionData.billingItems }}</span>
      </div>
      <p class="ps pTwo">
        <span><strong>处方</strong></span>
      </p>
      <el-table v-loading="loading" :data="presTableList">
        <el-table-column label="名称" prop="medicinesName" />
        <el-table-column label="规格" prop="medicinesSpec" />
        <el-table-column label="单位" prop="price" />
        <el-table-column label="用法" prop="usageMethod" />
        <el-table-column label="频率" prop="frequency" />
        <el-table-column label="数量" prop="quantity" />
        <el-table-column label="单价" prop="price" />
        <el-table-column label="折扣（%）" prop="discount" />
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span>{{ Number(scope.row.quantity) * Number(scope.row.price) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <p>
        <strong>合计：￥{{ prescriptionData.amount?prescriptionData.amount:0 }}</strong>
      </p>
      <p>
        <span><strong>医嘱：</strong></span>
        <el-input v-model="prescriptionData.medicalAdvice" type="textarea" :autosize="{ minRows:4}" class="textareaCss" disabled />
      </p>
      <div class="headStyle fofo"><span>处方单号：{{ prescriptionData.prescriptionNumber }}</span><span>科室/部门：{{ prescriptionData.departments }}</span><span>开单人：{{ prescriptionData.createdBy }}</span>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Search from "@/components/Search";
import { selections } from "@/config";
import Dialog from "@/components/Dialog/index";
export default {
  components: {
    Search,
    Dialog,
  },
  data() {
    return {
      selections,
      searchForm: {},
      options: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      prescriptionList: [],
      prescriptionData: {},
      presTableList: [],
      title: "",
      visible: false,
      loading: false,
    };
  },
  created() {
    this.getPrescriptionList();
  },
  methods: {
    searchChange(e) {
      console.log(e);
    },
    async getPrescriptionList() {
      this.loading = true;
      const res = await this.$api['department/order/prescriptionlist']({ ...this.params, query: this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询处方列表失败！');
      this.prescriptionList = res.data.result;
      this.total = res.data.total;
      this.getUserData();
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getPrescriptionList();
    },
    // 当前用户信息
    getUserData() {
      // console.log(this.$store.getters.currentUserInfo.name);
      this.prescriptionList.map(item => {
        item.createdBy = this.$store.getters.currentUserInfo.name;
      });
    },
    // 搜索
    searchBtn() {
      this.getPrescriptionList();
    },
    // 详情
    async detailsBtn(row) {
      this.title = "处方单详情";
      // this.testBtn = "确认";
      this.visible = true;
      this.loading = true;
      const res = await this.$api['department/order/prescriptionlistid']({ id: row.id });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查看详情列表失败！');
      this.presTableList = res.data.prescriptionListDetailsDtoList;

      // 获取顾客信息
      const response = await this.$api['department/order/customer']({ name: row.customerName });
      if (response.code === 200 && response.data) {
        this.prescriptionData = Object.assign(res.data, response.data, row);
      } else {
        this.prescriptionData = res.data;
      }
    },
    // 关闭
    handleClose() {
      // this.$refs.ruleForm.resetFields();
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.timeType = val.timeType;
      this.searchForm.createdTime = val.createdTime;
      this.getPrescriptionList();
    },
    handleTypeChange(val) {
      this.searchForm.timeType = val.timeType;
      this.searchForm.createdTime = val.createdTime;
      this.getPrescriptionList();
    },
  },
};
</script>
<style lang="scss" scoped>
.headStyle.fofo {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px dashed #eee !important;
}
.el-steps {
  justify-content: center;
}
</style>
